<template>
  <a-card>
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd()">添加用户</a-button>
    </div>
    <div class="user-table">
      <a-table
          ref="userTable"
          size="middle"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading">

         <span slot="action" slot-scope="text, record">
           <a-tag color="#2db7f5" @click="handleEdit(record)">编辑</a-tag>
           <a-popconfirm ok-text="确认" cancel-text="取消" @confirm="handleDel(record)">
             <template slot="title">
               确认删除用户{{ record.realName }}吗？
             </template>
             <a-tag color="red">删除</a-tag>
           </a-popconfirm>
        </span>

        <template slot="avatarSlot" slot-scope="text, record">
          <a-avatar shape="square" :src="record.avatar" alt="头像" icon="user" />
        </template>

      </a-table>
    </div>
    <user-modules ref="modalForm" @ok="modalFormOk"></user-modules>
  </a-card>
</template>

<script>
import {TableListMixin} from "@/mixins/TableListMixin";
import UserModules from "@views/user/modules/UserModules";

export default {
  name: "UserList",
  mixins: [TableListMixin],
  components: {
    UserModules,
  },
  data(){
    return {
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title: '用户账号',
          align: "center",
          dataIndex: 'username',
          width: 120,
          sorter: true
        },
        {
          title: '用户姓名',
          align: "center",
          width: 100,
          dataIndex: 'realName',
        },
        {
          title: '头像',
          align: "center",
          width: 120,
          dataIndex: 'avatar',
          scopedSlots: {customRender: "avatarSlot"}
        },

        {
          title: '性别',
          align: "center",
          width: 80,
          dataIndex: 'sex_dictText',
          sorter: true
        },
        {
          title: '生日',
          align: "center",
          width: 100,
          dataIndex: 'birthday'
        },
        {
          title: '手机号码',
          align: "center",
          width: 100,
          dataIndex: 'phone'
        },
        {
          title: '部门',
          align: "center",
          width: 180,
          dataIndex: 'orgCodeTxt'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: "center",
          width: 170
        }
      ],
      url: {
        list: '/user/pageList',
        delete: '/user/delete',
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
